<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">
    <!-- 收入/订单量/用户数/评论数 -->
    <div class="row">
      <div class="col-md-6 col-xl-3">
        <div class="card bg-primary text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fs-22"></i></span>
              <span class="fs-22 lh-22">{$Revenue}</span>
            </div>
            <div class="text-right">商品订单总收入</div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-xl-3">
        <div class="card bg-success text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fs-22"></i></span>
              <span class="fs-22 lh-22">{$OrderTotal}</span>
            </div>
            <div class="text-right">订单总量</div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-xl-3">
        <div class="card bg-danger text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fs-22"></i></span>
              <span class="fs-22 lh-22">{$UserTotal}</span>
            </div>
            <div class="text-right">用户总数</div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        <div class="card bg-purple text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fs-22"></i></span>
              <span class="fs-22 lh-22">{$CommentTotal} 条</span>
            </div>
            <div class="text-right">评论总数</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 注册/交易 -->
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <div class="card-title">每周用户</div>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-bars"></canvas>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <div class="card-title">交易历史记录</div>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-lines"></canvas>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">

      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">项目信息</div>
          </header>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>项目名称</th>
                    <th>预约用户</th>
                    <th>预约时间</th>
                    <th>状态</th>
                    <th>进度</th>
                  </tr>
                </thead>
                <tbody>
                  {foreach $PrOrderList as $key => $item}
                  <tr>
                    <td>{$key + ($page - 1) * $num + 1}</td>
                    <td>{$item['project']['name']}</td>
                    <td>{$item['user']['nickname']}</td>
                    <td>{$item['createtime']}</td>
                    {if $item['status']>=0 }
                    <td><span class="badge {$item['status']==3?'badge-success':'badge-info'}">{$item['status_text']}</span></td>
                    {/if}
                    {if $item['status']< 0 }
                    <td><span class="badge {$item['status']==-2?'badge-danger':'badge-warning'}">{$item['status_text']}</span></td>
                    {/if}
                    
                    {if $item['status']==0 }
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 0%;"></div>
                      </div>
                    </td>
                    {/if}
                    {if $item['status']==1 }
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 33%;"></div>
                      </div>
                    </td>
                    {/if}
                    {if $item['status']==2 ||$item['status']==-2}
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 66%;"></div>
                      </div>
                    </td>
                    {/if}
                    {if $item['status']==3 ||$item['status']==-1 ||$item['status']==-3}
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 100%;"></div>
                      </div>
                    </td>
                    {/if}
                    
                  </tr>
                  {/foreach}
                  <!-- danger -->
                </tbody>
              </table>
            </div>
            {$PrOrderList|raw}
          </div>
        </div>
      </div>

    </div>

  </div>

</main>
<!--End 页面主要内容-->

<script type="text/javascript" src="/static/admin/js/Chart.min.js"></script>
<script>
  // 注册用户
  $.ajax({
    type: "post",
    url: `{:url('admin/index/index')}`,
    data: {
      action: 'register'
    },
    dataType: "json",
    success: function (res) {
      if (res.code === 1) {
        var register = res.data.register
        new Chart($(".js-chartjs-bars"), {
          type: 'bar',
          data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
              label: "注册用户",
              borderWidth: 1,
              borderColor: 'rgba(0, 0, 0, 0)',
              backgroundColor: 'rgba(51, 202, 185, 0.5)',
              hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
              hoverBorderColor: "rgba(0, 0, 0, 0)",
              data: register,  //X轴对应的值
            }]
          }
        });
      }
    }
  })
  // 交易数据
  $.ajax({
    type: "post",
    url: `{:url('admin/index/index')}`,
    data: {
      action: 'business'
    },
    dataType: "json",
    success: function (res) {
      if (res.code === 1) {
        var days = Object.values(res.data.days)
        var business = res.data.business
        new Chart($(".js-chartjs-lines"), {
          type: 'line',
          data: {
            labels: days,
            datasets: [{
              label: "交易金额",
              borderColor: '#358ed7',
              backgroundColor: 'rgba(53, 142, 215, 0.175)',
              borderWidth: 1,
              fill: false,
              lineTension: 0.5,
              data: business,  //X轴对应的值
            }]
          }
        });
      }
    }
  })
</script>